<template>
    <div id="weatherItem" class="weatherItem">
        <div>{{weather.date}}<span class="date">{{day}}</span></div>
        <div><i v-bind:class="['iconfont',weather.cls]"></i></div>
        <div><span>{{weather.high}}</span><span class="low">{{weather.low}}</span></div>
    </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "weatherItem",
  props: ["weather", "day"],
  
};
</script>
<style lang="less" scoped>
@import "../styles/var";

.weatherItem {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  color: @weatherColor;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  height: 38px;
  .iconfont {
    font-size: @weatherSize;
  }
  & > div:nth-child(1) {
    width: 82px;
  }
  .date {
    margin-left: 5px;
  }
  .low {
    margin-left: 10px;
  }
}
</style>
